'use strict';
//门店发货订单
import React,{Component} from 'react';
import Header from '../../common/header';
import * as URLconstant from '../../constant/URLconstant'
import Util from '../../common/util';
import {
    View,
    Text,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView, ListView
} from 'react-native';
export default class shopDeliverOrder extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            dataSource2: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
            dataSource: [],
            page:1,
            limit:10,
            isOver:false,
            again:true,
            loaded:true,
            headerTitle:[{ "name": "全部订单", "status": 0 }, { "name": "平台收款订单", "status": 1}, { "name": "门店收款订单", "status": 2 }],
            orderStatus:0
        };
          this.onEndReached=this.onEndReached.bind(this)
          this._renderRow=this._renderRow.bind(this)
          this.renderFooter=this.renderFooter.bind(this)
      }

    componentDidMount() {
        this.getOrder()
    }

      getOrder(){
          let url = URLconstant.ORDERLIDT_URL
          let datakey=[]
          datakey['user_id']=this.props.user_id
          datakey['page'] = this.state.page;
          datakey['limit'] = this.state.limit
          datakey['status'] = 'commented'
          datakey['member_extract'] = 20
          datakey['gathering'] = this.state.orderStatus
          Util.get(url,datakey,this.getOrderSuc.bind(this),this.errorCallback.bind(this))
      }

    getOrderSuc(datas){
        if(datas.status==0){
            let isOver = false
            let again = true
            let total = datas.data.total
            let newDatas
            if(datas.data.length==0){
                newDatas=[]
            }else{
                newDatas = datas.data.list;
            }

            let oldDatas = this.state.dataSource;
            if(newDatas.length<total.limit){
                isOver=true
                again=false
            }
            Array.prototype.push.apply(oldDatas, newDatas);
            this.setState({
                isOver:isOver,
                again:again,
                dataSource2: this.state.dataSource2.cloneWithRows(oldDatas),
                dataSource: oldDatas,
                loaded:false,
                page:this.state.page+1
            })
        }else{
            this.setState({
                loaded:false,
            })
        }
    }

    errorCallback(err){

    }

    async selectStatus(status){
          await this.setState({
              dataSource2: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
              dataSource: [],
              page:1,
              limit:10,
              isOver:false,
              again:true,
              loaded:true,
              orderStatus:status
          })
        this.getOrder()
    }


    onEndReached(){
        let again = this.state.again
        if(again){
            this.getOrder()
        }
    }

    renderFooter(){
        return (
            <View style={{height:30,alignItems:'center',justifyContent:'center'}}>
                <Text style={{fontSize:12,color:"#969696"}}>{this.state.isOver?"没有更多数据了":"正在加载中"}</Text>
            </View>
        )
    }

    _renderRow(item){
        return(
            <View key={item.order_id} style={styles.order_item}>
                <View style={styles.order_header}>
                    <View style={styles.header_left}>
                        <Text style={{fontSize:14,color:"#000",marginBottom:5}}>店铺名:{item.seller_name}</Text>
                        <Text style={{fontSize:12,color:"#969696"}}>订单号:{item.order_sn}</Text>
                    </View>
                    <View style={styles.status_box}>
                        <Text style={{fontSize:12,color:"#33c0a0"}}>门店自提</Text>
                    </View>
                </View>
                {
                    item.order_goods.map((goods,index)=>{
                        return(
                            <View key={index} style={styles.goods_item}>
                                <Image
                                    source={{uri:goods.goods_image}}
                                    resizeMode={'cover'}
                                    style={{width:80,height:80,}}
                                />
                                <View style={styles.goods_right}>
                                    <View style={styles.right_header}>
                                        <Text style={{fontSize:14,color:"#000"}}>{goods.goods_name}</Text>
                                        <Text style={{fontSize:12,color:"#969696"}}>{goods.specification}</Text>
                                    </View>
                                    <View style={styles.goods_price_view}>
                                        <Text style={{fontSize:12,color:"#333",marginRight:3}}>单价:</Text>
                                        <Text style={{fontSize:14,color:"#cc1d22"}}>¥{goods.price}</Text>
                                    </View>
                                </View>
                            </View>
                        )
                    })
                }
                <View style={styles.rows_item}>
                    <Text style={{fontSize:12,color:"#666"}}>共{item.total}件商品,合计</Text>
                    <Text style={{fontSize:14,color:"#cc1d22"}}>¥{item.order_amount}</Text>
                </View>
                <View style={styles.rows_item}>
                    {
                        item.payment_code=='wxweipay'?
                            <Text style={{fontSize:14,color:"#cc1d22"}}>{item.gathering_name}完成发货，门店收到了佣金{item.refund_status}元</Text>
                            :
                            <Text style={{fontSize:14,color:"#cc1d22"}}>门店收款，收款者:{item.gathering_name}</Text>
                    }
                </View>
                <View style={styles.rows_item}>
                    <Text style={{fontSize:12,color:"#696969"}}>提货时间:{item.updated_at}</Text>
                </View>
            </View>
        )
    }

      render(){
          return(
              <View style={{flex:1,backgroundColor:"#f0f0f0"}}>
                  <Header navigator={this.props.navigator} initObj={{ title: '门店发货订单',id:2}}/>
                  <View style={styles.header_view}>
                      {
                          this.state.headerTitle.map((item,index)=>{
                              return(
                                  <TouchableOpacity onPress={()=>this.selectStatus(item.status)} key={index} style={item.status==this.state.orderStatus?[styles.header_item,styles.selected_item]:styles.header_item}>
                                      <Text style={item.status==this.state.orderStatus?{fontSize:14,color:"#f00"}:{fontSize:14,color:"#000"}}>{item.name}</Text>
                                  </TouchableOpacity>
                              )
                          })
                      }
                  </View>
                  {
                      this.state.loaded?
                          <View style={{flex:1}}>
                              {Util.loading()}
                          </View>:
                          <View style={{flex:1}}>
                              {
                                  this.state.dataSource.length==0?
                                      <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                                          <Text>{this.state.orderStatus==0?'没有订单':this.state.orderStatus==1?"没有发货订单":"没有收款订单"}</Text>
                                      </View>:
                                      <ListView
                                          dataSource={this.state.dataSource2}
                                          onEndReached={this.onEndReached}
                                          renderRow={this._renderRow}
                                          renderFooter={this.renderFooter}
                                      />
                              }
                          </View>
                  }
              </View>
          )
      }
}
var styles = StyleSheet.create({
    header_view:{
        backgroundColor:"#fff",
        flexDirection:'row',
        marginBottom:10
    },
    header_item:{
        flex:1,
        height:40,
        alignItems:'center',
        justifyContent:'center',
        borderBottomWidth:1,
        borderBottomColor:"transparent"
    },
    selected_item:{
        borderBottomColor:"#f00"
    },
    order_item:{
        backgroundColor:"#fff",
        padding:10,
        marginBottom:10,
    },
    order_header:{
        borderBottomWidth:1,
        borderBottomColor:"#e0e0e0",
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        paddingBottom:10
    },
    header_left:{
        flexDirection:'column'
    },
    status_box:{
        width:65,
        height:24,
        alignItems:'center',
        justifyContent:'center',
        borderWidth:1,
        borderColor:"#33c0a0",
        borderRadius:5
    },
    goods_item:{
        flexDirection:'row',
        paddingVertical:8,
    },
    goods_right:{
        flex:1,
        paddingLeft:10,
        height:80,
        justifyContent:'space-between',
        flexDirection:'column'
    },
    right_header:{
        flexDirection:'column'
    },
    goods_price_view:{
        flexDirection:'row',
        alignItems:'center'
    },
    rows_item:{
        height:35,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:"flex-end",
        borderTopWidth:1,
        borderTopColor:"#e0e0e0"
    }
})